import React, { memo, useState } from "react";
import { useDispatch } from "react-redux";

import { Form, Input, Button, Row, Col } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
// import { AES } from "crypto-ts"; // crypto-js  crypto-ts这玩意用不了 --以后用其他的方式加密

import { validatePass } from "utils/validate";
import HYCode from "components/code/index";
import { PropCut, FormType, formData } from "../../mark";
import { toLogin } from "../store/actions";

const LoginForm = memo(function (props: PropCut) {
  // state
  const [username, setUsername] = useState("18310612837@qq.com");
  const password = "cb123456";
  const module: FormType = "login";
  const loading = false;
  // redux
  const dispatch = useDispatch();

  const onFinish = (val: formData) => {
    const { username, code, password } = val;
    const requestData = {
      username,
      code,
      password: password,
    };
    dispatch(toLogin(requestData));
  };
  const accountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (username === e.target.value.trim()) return;
    setUsername(e.target.value);
  };
  return (
    <div>
      <div className="form-header">
        <h4 className="column">登录</h4>
        <span onClick={() => props.cut(module)}>账号注册</span>
      </div>
      <div className="form-content">
        <Form
          name="normal_login"
          className="login-form"
          initialValues={{
            remember: true,
            username: username,
            password: password,
          }}
          onFinish={onFinish}
        >
          <Form.Item
            name="username"
            rules={[
              { required: true, message: "邮箱不能为空！" },
              { type: "email", message: "邮箱格式不正确" },
            ]}
          >
            <Input
              placeholder="账号"
              prefix={<UserOutlined className="site-form-item-icon" />}
              onChange={accountChange}
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[
              { required: true, message: "密码不能为空" },
              {
                pattern: validatePass(),
                message: "请输入大于6位小于20位数字+字母",
              },
            ]}
          >
            <Input
              placeholder="密码"
              type="password"
              prefix={<LockOutlined className="site-form-item-icon" />}
            />
          </Form.Item>
          <Form.Item
            name="code"
            rules={[
              { required: true, message: "请输入验证码！" },
              { min: 6, message: "请输入六位验证码！" },
              { max: 6, message: "请输入六位验证码！" },
            ]}
          >
            <Row gutter={13}>
              <Col span="15">
                <Input
                  placeholder="验证码"
                  prefix={<LockOutlined className="site-form-item-icon" />}
                />
              </Col>
              <Col span="9">
                <HYCode username={username} module={module}></HYCode>
              </Col>
            </Row>
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit" block loading={loading}>
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
});

export default LoginForm;
